<template>
	<div class="course">
		<div class="banner">
		</div>
		<div class="filterWrapper">
		  <div class="filterBox">
			  <div class="row1" style="margin: 0;height: 50px;">
				  <a href="#" class="name">分类</a>
				  <a @click="activeBtn(item,i,0)" href="#/course" :class="['value',i === filterList[0].index?'active':'']" v-for="(item,i) in filterList[0].list" :key="i">{{item}}</a> 
			  </div>
			   <div class="aline"></div>
			  <div class="row">
				  <a href="#" class="name">学院</a>
				  <a @click="activeBtn(item,i,1)" href="#/course" class="value" :class="['value',i === filterList[1].index?'active':'']" v-for="(item,i) in filterList[1].list" :key="i">{{item}}</a>
			  </div>
			  <div class="row">
				  <a href="#" class="name">老师</a>
				  <a @click="activeBtn(item,i,2)" href="#/course" class="value" :class="['value',i === filterList[2].index?'active':'']" v-for="(item,i) in filterList[2].list" :key="i">{{item}}</a>
			  </div>
			  <div class="row">
				  <a href="#" class="name">难度</a>
				  <a @click="activeBtn(item,i,3)" href="#/course" class="value" :class="['value',i === filterList[3].index?'active':'']" v-for="(item,i) in filterList[3].list" :key="i">{{item}}</a>
			  </div>
			  <div class="row">
				  <a href="#" class="name">技术相关</a>
				  <a @click="activeBtn(item,i,4)" href="#/course" class="value" :class="['value',i === filterList[4].index?'active':'']" v-for="(item,i) in filterList[4].list" :key="i">{{item}}</a>
			  </div>
			  <div class="row">
				   <a href="#" class="name">可以学习</a>
				   <template scoped="scope">
					   <el-switch
					   @change="getCourseList"
					     v-model="filterInfo.optional"
					     active-color="#393636"
					     inactive-color="#E0E0E0">
					   </el-switch>
				   </template>
			  </div>
		  </div>
		</div>
				<Card v-for="item in queryList" 
				:key="item.id"
				:name="item.name" 
				:teacher="item.teacher" 
				:college="item.college" 
				:level="item.level" 
				:skill="item.skill"
				:duration="item.duration"
				:desc="item.desc"
				:situation="item.situation"
				></Card>
	</div>
</template>

<script>
	import Card from '../assembly/courseCard.vue'
	export default{
	components:{
		Card
	},
	data(){
		return {
			filterList:[
			{list:['全部','基础学院','进阶学院'],index:0},
			{list:['全部','零基础学院','MVVM学院','设计师学院'],index:0},
			{list:['全部','小谢','Varsha','魏嘉汛','绿','詹方','刘超凡','王兵','张思远'],index:0},
			{list:['全部','普通','进阶','困难'],index:0},
			{list:['全部','san','mvvm','css','HTML','JavaScript'],index:0}
			],
			activeIndex: 0,
			filterInfo:{
				class:'',
				college:'',
				teacher:'',
				level:'',
				skill:'',
				optional:false
			},
			queryList:[],
			courseList:[
				
				{
					id:0,
					name:'VUE-cli',
					teacher:'小谢',
					college:'MVVM学院',
					learnable:false,
					level:'进阶',
					skill:['mvvm','JavaScript'],
					duration:'大约需要1天',
					desc:'学习并运用vue-cli搭建项目，嘻嘻',
				    situation:[999,999]
				},
				{
					id:1,
					name:'1.1 课程系列引导及准备工作',
					teacher:'小谢',
					college:'MVVM学院',
					learnable:false,
					level:'普通',
					skill:[''],
					duration:'大约需要1天',
					desc:'关于此课程 此课程通过高性能的百度JavaScript组件化开源框架 baidu/San ，由浅入深的带大家了解百度在企业级应用前端开发方面的一些积累和实践。课程主要包含： 从零开始 -&gt; 搭建前端工程化开发环境 稳扎稳打 -&gt; 高频API操刀实践 小有所学 -&gt; 综合小应用开发实战 学有余力 -&gt; 挑战高级应用 课程适用人群 你需要具备一定前端开发基础；',
				    situation:[4545,610]
				},
				{
					id:2,
					name:'1.2 用webpack4 / parcel快速搭建开发san helloworld',
					teacher:'Varsha',
					college:'MVVM学院',
					learnable:false,
					level:'普通',
					skill:['HTML'],
					duration:'大约需要1天',
					desc:'任务目的 了解最新的webpack4 / parcel 学习如何使用构建工具搭建前端开发环境 了解san框架 任务描述 请根据学习资料及自己的理解，使用webpack4或parcel搭建一个开发环境',
				    situation:[1750,235]
				},
				{
					id:3,
					name:'2.1 数据操作2',
					teacher:'魏嘉汛',
					college:'MVVM学院',
					learnable:false,
					level:'普通',
					skill:['mvvm','san'],
					duration:'大约需要1天',
					desc:'任务目的 了解san视图与数据绑定的方式，以及数据校验的方法 熟悉san的数据操作相关API 练习综合运用san的数据绑定、操作、校验实现视图的交互与变更',
				    situation:[4545,610]
				},
				{
					id:4,
					name:'No.1 - 制作一个简单的菜单动画效果',
					teacher:'绿',
					college:'设计师学院',
					learnable:false,
					level:'普通',
					skill:['css'],
					duration:'大约需要1天',
					desc:'关于此课程 此课程按照简单到难的顺序一共有八个任务，由浅入深的带大家了解 Web 动效落地方法 。',
				    situation:[2555,465]
				},
				{
					id:5,
					name:'第一天：为什么有那么多人要做前端？',
					teacher:'詹方',
					college:'零基础学院',
					learnable:false,
					level:'普通',
					skill:[''],
					duration:'大约需要1天',
					desc:'第一天：为什么有那么多人要做前端？ 前言 首先要感谢在2017年6月13日到8月10日，陪伴我的十多位北京邮电大学的在校同学，他们付出了66天，每天2-4个小时，也许更多的时间，来和我们一起做了一个实验，在非工作压力的情况下，在校生如何才能更好地学习技术，我们尝试了一些方法，分成了很多个班进行了实验。',
				    situation:[4545,610]
				},
				{
					id:6,
					name:'2.1 数据操作',
					teacher:'刘超凡',
					college:'MVVM学院',
					learnable:false,
					level:'普通',
					skill:['mvvm','san','JavaScript'],
					duration:'大约需要1天',
					desc:'任务目的 了解san视图与数据绑定的方式，以及数据校验的方法 熟悉san的数据操作相关API 练习综合运用san的数据绑定、操作、校验实现视图的交互与变更',
				    situation:[4545,610]
				},
				{
					id:7,
					name:'2.1 数据操作',
					teacher:'王兵',
					college:'MVVM学院',
					learnable:false,
					level:'普通',
					skill:['mvvm','san','JavaScript'],
					duration:'大约需要1天',
					desc:'任务目的 了解san视图与数据绑定的方式，以及数据校验的方法 熟悉san的数据操作相关API 练习综合运用san的数据绑定、操作、校验实现视图的交互与变更',
				    situation:[4545,610]
				}
			]
		}
		},
		methods:{
			getCourseinfo(index,info){
				let temp = ''
				if(info === '全部')
				info = ''
				switch(index){
					case 0:
					this.filterInfo.class = info;
					break;
					case 1:
					this.filterInfo.college = info;
					break;
					case 2:
					this.filterInfo.teacher = info;
					break;
					case 3:
					this.filterInfo.level = info;
					break;
					case 4:
					this.filterInfo.skill = info;
					break;
				}
				
			// console.log(this.filterInfo)
			this.getCourseList()
			},
			activeBtn(type,i,n){
				//console.log(i)
				this.filterList[n].index = i
				//console.log(type)
				this.getCourseinfo(n,type)
			},
			getCourseList(){
				this.queryList = []
				//console.log(this.filterInfo.optional)
				this.courseList.filter(item => {
					 if(item.college === this.filterInfo.college || this.filterInfo.college === '')
					 if(item.teacher === this.filterInfo.teacher || this.filterInfo.teacher === '')
					 if(item.level === this.filterInfo.level || this.filterInfo.level === '')
					 if(item.learnable === this.filterInfo.optional)
					 {
						 for(let i=0;i<item.skill.length;i++)
						 {
							 if(item.skill[i] === this.filterInfo.skill || this.filterInfo.skill === '')
							 {
							this.queryList.push(item)
							break;
							}
						 }
					 }
				 })
				 //console.log(this.queryList)
			}
		},
		created(){
			this.getCourseList()
		}
	}
</script>

<style scoped="scoped">
	p{
		margin: 0;
	}
	.course{
		position: relative;
	}
	.banner{
		position: relative;
		width: 100%;
		height: 303px;
		background-image: url(http://ife.baidu.com/2018/asset/common/img/courseListBanner_4b46ba9.jpg);
		background-size: 100% 100%;
	}
	.filterWrapper{
		position: relative;
		margin:-10% auto;
		width: 100%;
		height: auto;
		margin-bottom: 70px;
	}
	.filterBox{
		box-shadow: 0 1px 1px rgba(0,0,0,.05);
		border: 1px solid transparent;
		border-color: #ddd;
		width: 62%;
		padding: 15px;
		height: 262px;
		background: white;
		margin: 0 auto;
	}
	.row{
		line-height: 35px;
		height: 35px;
		width: 100%;
		margin-bottom:8px;
	}
	.row .name{
		width: auto;
		color: #2d2d2d;
		display: inline-block;
		font-size: 15px;
		margin-right: 20px;
	}
	.row1{
		height: 50px;
		line-height: 50px;
	}
	.row1 .name{
		width: auto;
		color: #2d2d2d;
		display: inline-block;
		font-size: 15px;
		margin-right: 20px;
	}
	.row1 .value{
		height: 50px;
		line-height: 50px;
		font-size: 14px;
		width: auto;
		color: #2d2d2d;
		opacity: .5;
		display: inline-block;
		margin-right:20px;
	}
	.row1 .value:active{
		opacity: 1;
	}
	.row .value{
		height: 35px;
		line-height: 35px;
		font-size: 14px;
		color: #2d2d2d;
		opacity: .5;
		width: auto;
		display: inline-block;
		margin-right:20px;
	}
	.aline {
	    background-color:#E6E3E3;
	    height:.5px;
		width: 96%;
		margin: 0 auto;
	}
	.active{
		opacity: 1 !important;
		font-weight: 600;
	}
</style>
